<template>
  <div>
    <int :info="info"></int>

    <div class="exp">
      <Search @search="searchFn"></Search>
      <el-row class="centop1">
        <el-col :span="4">
          <span :class="flzt == 1 ? 'acspan' : ''" @click="changezt(1)"
            >最热</span
          >
          <span :class="flzt == 2 ? 'acspan' : ''" @click="changezt(2)"
            >最新</span
          >
          <span :class="flzt == 3 ? 'acspan' : ''" @click="changezt(3)"
            >关注</span
          >
        </el-col>
        <el-col :span="3" :offset="17">
          <div class="btn" @click="fabu">
            <i class="iconfont icon-bianji"></i>发布经验
          </div>
        </el-col>
      </el-row>
      <div v-for="(item, index) in expList" :key="index">
        <Expitem :expinfo="item" @changeItem="changeItem" @changeExpList="changeExpList" :myIndex="index"></Expitem>
      </div>
      <div class="moreBtn" @click="addMore" v-if="isShowMore">
        加载更多<i class="el-icon-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
import Int from "../components/Int.vue";
import Expitem from "../components/Expitem.vue";
import Search from "./../components/searchandlist.vue";
export default {
  components: {
    Int,
    Expitem,
    Search,
  },
  data() {
    return {
      info: {
        name: "疾病经验",
        enName: "Disease experience",
        text: "“疾病档案”特别设立了疾病经验区域，帮助用户交流疾病经验，根据真实经验来了解疾病信息",
        enText:
          '"Disease archives" has specially set up a disease experience area to help users exchange disease experience ',
        img: require("../assets/s4.png"),
      },
      flzt: 1, //哪种状态1最热 2最新 3关注
      expList: [],
      page: 1,
      isShowMore:true,
      tag:null,
      title:null
    };
  },
  created() {
    // this.expList = this.$store.state.exp.expList;
    this.getData()
  },
  watch:{
    flzt(){
      this.expList=[]
      this.page=1
      if(this.flzt==2){//最新
        this.getNewExp()
      }else if(this.flzt==3){//关注
        this.getConcernExp()
      }else if(this.flzt==1){
        this.getData()
      }
    },
  },
  methods: {
    changezt(num) {
      this.flzt = num;
    },
    getData(){//获取数据
  this.$axios({
      url: "experience/selectByType",
      method: "get",
      params: {
        page: this.page,
        size: 6,
        status: 1,
      },
    }).then((res) => {
      console.log(res);
      if (res.code == "200") {
        if(res.data.count<=6||res.data.length<6){
            this.isShowMore=false
          }else{
            this.isShowMore=true
          }
        this.page = 1;
        let newList = res.data.map((item) => ({
            ...item,
            isZan: false,
            isZhangkai: false,
            isPinglun: false,
            isShowCom: false,
            remarkPage:1
          }));
          this.expList = [...this.expList, ...newList];
      }
    });
    },
    getNewExp(){//最新
      this.$axios({
      url: "/experience/newestEx",
      method: "post",
      data: this.$qs.stringify({
        page: this.page,
        size: 6
      }),
    }).then((res) => {
      console.log(res);
      if (res.code == "200") {
        if(res.data.count<=6||res.data.length<6){
            this.isShowMore=false
          }else{
            this.isShowMore=true
          }
        this.page = 1;
        let newList = res.data.map((item) => ({
            ...item,
            isZan: false,
            isZhangkai: false,
            isPinglun: false,
            isShowCom: false,
            remarkPage:1
          }));
          this.expList = [...this.expList, ...newList];
      }
    });
    },
    getConcernExp(){//关注
      this.$axios({
      url: "/experience/concernEx",
      method: "post",
      data: this.$qs.stringify({
        page: this.page,
        size: 6
      }),
    }).then((res) => {
      console.log(res);
      if (res.code == "200") {
        if(res.data.count<=6||res.data.length<6){
            this.isShowMore=false
          }else{
            this.isShowMore=true
          }
        this.page = 1;
        let newList = res.data.map((item) => ({
            ...item,
            isZan: false,
            isZhangkai: false,
            isPinglun: false,
            isShowCom: false,
            remarkPage:1
          }));
          this.expList = [...this.expList, ...newList];
      }else if(res.code=="5032"){
        this.$message({
            message: res.msg,
            type: "warning",
          });
      }
    });
    },
    changeItem(obj) {
      //obj格式{id:1,key:1,value:1}
      console.log(obj);
      if (!this.$getStorage("userinfo")) {
        this.$router.push("/main/login");
        return;
      }
      //增加浏览量
      if (obj.key == "isZhangkai" && obj.value == true) {
        this.addView(obj.id);
      }

      this.expList.forEach((item,index) => {
        if (item.id == obj.id) {
          //点赞
          if (obj.key == "isLike") {
            this.setLike(obj.id, item[obj.key]).then((res) => {
              console.log(res);
              if (res.code == "200") {
                item.isLike = !item.isLike;
                item.likeNum = res.data.likeNum;
              }
            });
          } else if (obj.key == "isShouCang") {//收藏
          let allData={targetId:item.id,status:item.isCollection==false?1:-1,type:4}
          this.$store.dispatch('collection',allData).then(res=>{
            item.isCollection = !item.isCollection;
          })
            
          } else if (obj.key == "isShowCom") {
            item.remarkPage=obj.page
            //查询评论
            this.selectRemark(obj.id,obj.page).then((res) => {
              console.log(res);
              if (res.code == "200") {
                //显示或隐藏
                item.isShowCom = obj.value?obj.value:!item.isShowCom ;
                //生成评论数组
                let arr = res.data.map((item) => ({
                  ...item,
                  isShowRemark: false,
                  inputRemark: false,
                }));
                //追加
                let newArr=arr
                console.log(newArr)
                //赋值
                this.$set(this.expList,index,{...item,remark:newArr,count:res.count,})
              }
            });
          } else if (obj.key == "moreRemark") {
          item.remarkPage=obj.page
            //查询评论
            this.selectRemark(obj.id,obj.page).then((res) => {
              console.log(res);
              if (res.code == "200") {
                //显示或隐藏
                item.isShowCom = obj.value?obj.value:!item.isShowCom ;
                //生成评论数组
                let arr = res.data.map((item) => ({
                  ...item,
                  isShowRemark: false,
                  inputRemark: false,
                }));
                console.log(item.remark)
                //追加
                let newArr=item.remark?[...item.remark,...arr]:arr
                console.log(newArr)
                //赋值
                this.$set(this.expList,index,{...item,remark:newArr,count:res.count})
              }
            });
          } else if (obj.key == "showRemark") {
            //展示回复输入框
           let arr= item.remark.map((item2) => {
              if (item2.remarkId == obj.remarkId) {
                item2.inputRemark = !item2.inputRemark;
              }else{
                item2.inputRemark=false
              }
              return item2
            });
            //修改
            this.$set(this.expList,index,{...item,remark:arr})
          }else if (obj.key == "openRemark") {
            //展示二级回复
           let arr= item.remark.map((item2) => {
              if (item2.remarkId == obj.remarkId) {
                item2.isShowRemark = !item2.isShowRemark;
              }else{
                item2.isShowRemark=false
              }
              return item2
            });
            
            this.$set(this.expList,index,{...item,remark:arr})
          } else {
            item[obj.key] = obj.value;
          }
        }
      });
    },
    //点赞
    async setLike(id, isLike) {
      if (!this.$getStorage("userinfo")) {
        this.$router.push("/main/login");
      } else {
        return await this.$axios({
          url: "/experience/likeOrUnlike",
          method: "post",
          data: this.$qs.stringify({
            experienceId: id,
            status: !isLike ? 1 : 0,
            userId: this.$getStorage("userinfo").id,
          }),
        });
      }
    },
    //展开|增加浏览量
    addView(id) {
      this.$axios({
        url: "/experience/selectDetailById",
        method: "get",
        params: {
          id,
          userId:
            this.$getStorage("userinfo") && this.$getStorage("userinfo").id,
        },
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.expList.forEach((item) => {
            if (item.id == res.data.id) {
              item.viewNum = res.data.viewNum;
              console.log(item);
            }
          });
        }
      });
    },
    //查询评论
    async selectRemark(id,page) {
      return await this.$axios({
        url: "/remark/select",
        method: "post",
        data: this.$qs.stringify({
          experienceId: id,
          page: page,
          size: 5,
        }),
      });
    },
    fabu() {
      this.$router.push("/main/releaseexp");
    },
    //搜索
    searchFn(con) {
      let types=[...this.$getStorage('classifyTree').partTree,...this.$getStorage('classifyTree').departmentTree]
      if(types.find(item=>item.name==con)){
        this.tag=con
      }else{
        this.title=con
      }
      this.$axios({
        url: "/experience/selectByType",
        method: "get",
        params: {
          page: 1,
          size: 6,
          tag: this.tag,
          title:this.title,
          status: 1,
        },
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.page = 1;
          if(res.data.count<=6||res.data.length<6){
            this.isShowMore=false
          }else{
            this.isShowMore=true
          }
          this.expList = res.data.map((item) => ({
            ...item,
            isZan: false,
            isZhangkai: false,
            isPinglun: false,
            isShowCom: false,
            remarkPage:1,
          }));
        }
      });
    },
    // 更多
    addMore() {
      this.page=this.page+1
       if(this.flzt==2){//最新
        this.getNewExp()
      }else if(this.flzt==3){//关注
        this.getConcernExp()
      }else if(this.flzt==1){
        this.getData()
      }
      this.$axios({
        url: "/experience/selectByType",
        method: "get",
        params: {
          page: this.page + 1,
          size: 6,
          status: 1,
          tag: this.tag,
          title:this.title,
        },
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          if(res.data.count<=6||res.data.length<6){
            this.isShowMore=false
          }else{
            this.isShowMore=true
          }
          this.page = this.page + 1;
          let newList = res.data.map((item) => ({
            ...item,
            isZan: false,
            isZhangkai: false,
            isPinglun: false,
            isShowCom: false,
            remarkPage:1
          }));
          this.expList = [...this.expList, ...newList];
        }
      });
    },
    changeExpList(obj,index){
      console.log(obj)
      this.$set(this.expList,index,obj)
    }
  },
};
</script>

<style lang="less" scoped>
.exp {
  background-color: #f2f7fb;
  overflow: hidden;
  & > div {
    width: 1200px;
    margin: 0 auto;
  }
  .centop1 {
    margin-top: 20px;
    padding: 20px 0;
    span {
      margin-right: 20px;
      color: #9ba5bb;
      padding: 5px 0;
      cursor: pointer;
      line-height: 40px;
    }
    .acspan {
      font-weight: bold;
      color: #333;
      border-bottom: 2px solid #333;
    }
  }
  .btn {
    cursor: pointer;
    height: 40px;
    background-color: #312a6d;
    border-radius: 5px;
    color: #f2f7fb;
    line-height: 40px;
    font-size: 18px;
    i {
      margin-right: 5px;
    }
  }
}
.moreBtn {
  background-color: #9ba5bb;
  color: #ddd;
  width: 300px !important;
  height: 50px;
  border-radius: 10px;
  line-height: 50px;
  font-size: 20px;
  user-select: none;
  margin-bottom: 30px !important;
  &:hover {
    color: white;
  }
}
</style>